<template>
    <div>
        <a-modal v-model:visible="visible" :width="600" :title="title" okText="确认" cancelText="取消" @ok="handleOk">
            <a-form ref="ruleFormRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="类型" name="type">
                    <a-select v-model:value="form.type" :disabled="!!form.id">
                        <a-select-option v-for="item of typeOptions" :key="item.dimensionName">
                            {{ item.dimensionName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="文档" name="file" v-if="form.type === '文档'">
                    <upload-cell :multiple="false" :span="24" :fileParams="{ connectType: '方法模板', type: 0 }" :fileList="fileList" @valueChange="fileChange" style="width: 100%; margin-top: 0" />
                </a-form-item>
                <a-form-item label="链接" name="link" v-else>
                    <a-textarea v-model:value="form.link" :maxlength="100" auto-size />
                </a-form-item>
                <a-form-item label="名称" name="name">
                    <a-textarea v-model:value="form.name" :maxlength="100" auto-size />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import UploadCell from '@/components/UploadCell/index.vue';
import { FileItem } from '@/types';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
interface FormState {
    id: Nullable<number>;
    type: string;
    file: string;
    fileUrl: string;
    link: string;
    name: string;
}
interface FormModalState {
    visible: boolean;
    form: FormState;
    fileList: Partial<FileItem>[];
    title: string;
}
export default defineComponent({
    name: 'CreateModal',
    components: {
        UploadCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const state = reactive<FormModalState>({
            visible: false,
            form: {
                id: null,
                type: '文档',
                file: '',
                fileUrl: '',
                link: '',
                name: ''
            },
            fileList: [],
            title: ''
        });
        const ruleFormRef = ref();
        const labelCol = { span: 4 };
        const wrapperCol = { span: 14 };
        const typeOptions = [
            { dimensionName: '文章' },
            {
                dimensionName: '文档'
            }
        ];
        const rules = {
            type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
            name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
        };

        const open = (action) => {
            // 编辑
            if (action.type === 'edit') {
                state.title = '编辑方法模板';
                state.form = {
                    ...action.data
                };
                state.fileList = [
                    {
                        fileName: state.form.file,
                        url: state.form.fileUrl,
                        connectType: '方法模板',
                        status: 'add',
                        type: 0
                    }
                ];
            } else {
                state.title = '新增方法模板';
                resetForm();
            }
            state.visible = true;
        };

        const handleOk = async () => {
            unref(ruleFormRef)
                .validate()
                .then(async () => {
                    const query = {
                        ...state.form
                    };
                    // console.log(query);
                    const { success, errorMsg } = await api.referenceTemplateModel.save(query);
                    if (success) {
                        message.success('新增成功');
                        emit('success');
                        state.visible = false;
                    } else {
                        message.error(errorMsg);
                    }
                });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            state.fileList = [...fileList];
            // 参考最后一条数据
            const { status, fileName, url } = state.fileList[state.fileList.length - 1];
            if (status === 'delete') {
                state.form.file = '';
                state.form.fileUrl = '';
            } else {
                state.form.file = fileName as string;
                state.form.fileUrl = url as string;
            }
        };
        const resetForm = () => {
            state.form = {
                id: null,
                type: '文档',
                file: '',
                fileUrl: '',
                link: '',
                name: ''
            };
            state.fileList = [];
        };

        return {
            ...toRefs(state),
            ruleFormRef,
            labelCol,
            wrapperCol,
            typeOptions,
            rules,
            open,
            handleOk,
            fileChange
        };
    }
});
</script>

<style scoped lang="less">
</style>